<template>
  <div
    class="hello"
    style="
      width: 100%;
      display: flex;
      align-item: center;
      justify-content: center;
      margin-top: 50px;
    "
  >
    <input
      type="text"
      style="padding: 10px; width: 40%"
      v-model="longUrl"
      placeholder="请输入https://xxx.xxx"
    />
    <button style="width: 100px; margin-left: 10px" @click="getLink">
      click
    </button>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import validUrl  from "valid-url"
interface Configs {
  message: string;
  status: boolean;
  link: string;
}

@Component({
  components: {},
})
export default class InputBox extends Vue {
  public longUrl: string = "";
  public config: Configs = {
    message: "",
    status: false,
    link: "",
  };
  $bus: any;
  getLink(): void {
    this.config.status = true;
    this.config.link = this.longUrl;
    this.config.message = "";
    if (!this.longUrl.replace(/\s*/g, "") && this.config.status) {
      this.config.message = "长链接不能为空";
      this.config.status = false;
    }
    if (!validUrl.isUri(this.longUrl) && this.config.status) {
      this.config.message = "长链接格式错误";
      this.config.status = false;
    }
    this.$bus.$emit("sendLongUrl", this.config);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
